import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import NoneCompleteVM from 'cvm/noneComplete/noneComplete'
import './noneComplete.less'

const NoneCompleteList = observer(({ vm }) => {
  return (
    <div className='none-records'>
      {
        vm.noneRecordDetail.length > 0 ? vm.noneRecordDetail.map((item, index) => {
          return (
            <div className='flex-wrap common-box' key={index}>
              <div className='flex-3'>
                <p className='title'>{item.Name}</p>
                <p className='tips'>{item.CompanyName === '' || item.CompanyName === null ? '项目合计使用时长' : item.CompanyName}</p>
              </div>
              <div className='flex-2'>
                <p className='money'>{item.Operate === 4 ? '-' : '+'}￥{item.Operate === 4 ? item.Total.toFixed(2) : (item.Bonus * item.Total).toFixed(2) }</p>
                <p className='time'>{item.CreatedTimeStr}</p>
              </div>
            </div>
          )
        }) : vm.record && <div className='none-record'>
          <img src={require('../../images/none-tixian.png')} />
          <p>暂无待结算记录</p>
        </div>
      }
    </div>
  )
})

@observer
class noneComplete extends Component {
  constructor (props) {
    super(props)
    window.document.title = '待结算记录'
    this.vm = new NoneCompleteVM(props)
  }
  render () {
    return (
      <div>
        <NoneCompleteList vm={this.vm} />
      </div>
    )
  }
}

export default noneComplete
